CSS 설계 【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? -좌우에 경계편- 위와 같이 잘 좌우에 테두리가 붙는 표제나 디자인이 있습니다. 지금까지 position과 before, after로 배치했지만,,, flex를 사용하여 간단하고 텍스트 증감을 고려한 좌우 테두리 제목을 만들 수 있습니다! index.html style.scss 표제 본체에 flex를 걸고, 가로, 세로 위치를 중앙에 align-items: center;, justify-content: cen... HTML5CSS3CSS 설계 【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? 표제 밑줄을 2배색 index.html style.scss 제목 밑줄을 중앙에서 2배색 index.html style.scss 참고원:... HTML5CSS3CSS 설계 CSS 출력 초학자가 CSS를 배우는 데 있어서, 처음으로 사용법을 고민할 것에 대해 정리해 본다 :link : visited :hover :active : focus :link-:visited-:hover-:active-:focus :link 정상 상태에서의 표현 : visited 이미 클릭한 (방문된) 링크 상태 :hover 커서를 링크 위에 놓았을 때의 상태 :active 버튼을 누른 상태에서만 상... CSSCSS3CSS 설계우이 【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? -배경 점, 버튼 테두리 그라데이션 편- 일부 사용하는 장면이 있을지도 모르기 때문에 css에서 배경에 도트를 배치하는 방법입니다. index.html dot.scss css는 뭐든지 할 수 있다고 생각했습니다. 위 캡처 버튼입니다. html은 변하지 않으므로 CSS만 설명합니다. btn.scss 참고원:... HTML5CSS 설계 Form 요소를 css3로 디자인 Form 요소를 css3로 디자인하면, 입력이나 선택의 조작성・선택의 가독성이 훨씬 높아집니다. 요전날 Form의 코딩을 했으므로, 몇번이나 몇번이나 조사해 써 온 코드를 정리해 보았습니다. 라디오 버튼과 체크 박스는 원, 사각형 및 모든 체크를 before/after 요소로 만듭니다. contact.html style.css contact.html style.css... 양식CSS 설계양식CSS3HTML5 Sass(scss) 도입~ 푸핏 ), 자동화도 진행 꽤 효율적으로 작업을 할 수 있게 되었습니다. sass-lint 설정 Gulp의 설치 시스템은, 잘 하는 분에게 해 주셔서 나는 가이드라인이나 css방향의 설정을 담당했습니다 . 신규 참가자용으로 코딩의 가이드라인을 web화하고 있었으므로, 그쪽에 Sass, Gulp의 도입 매뉴얼이나 가이드라인을 추가. scss 부하에 대하여 sass-lint 소개 Sass 코딩의 ... SassscssCSS 설계 Re: 0부터 시작하는 CSS 설계 어제는 선생의'디자인 사고를 낡은 조직에 침투시키는 절차'였다. 본사가 운영하는 웹 서비스의 대형 개조 사건과 함께 저는 CSS의 관리와 디자인을 다시 배웠기 때문에 이 일을 쓸 것입니다. 구글 엔지니어 필립 월튼 은 좋은 CSS 디자인은 다음과 같다고 말했다. → 제작자가 생각하는 그런 인상인가(표시) → 의도하지 않은 동작이 있는지(영향) 간편한 재활용 → 공통 모듈 및 구성 요소 → 각... CSS 설계flocssCSS JSCSS의 제안 JSCSS(JavaScript CSS)는 FLOCSS와 SMACSS 개념 을 채택한 CSS 구성 방안이다. JSCSS에서 JavaScript의 변수 이름 또는 함수 이름으로 사용되는 CSS의 이름(ID 변수만)js_*을 사용합니다. 이외에도 CSS 사용l-*을 사용하여 JavaScript의 변수 이름과 함수 이름을 CSS 이름으로 사용하지 않습니다. 자바스크립트 프로그램은 l-* 접두사-를 ... CSS 설계flocssJavaScriptSMACSSCSS
【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? -좌우에 경계편- 위와 같이 잘 좌우에 테두리가 붙는 표제나 디자인이 있습니다. 지금까지 position과 before, after로 배치했지만,,, flex를 사용하여 간단하고 텍스트 증감을 고려한 좌우 테두리 제목을 만들 수 있습니다! index.html style.scss 표제 본체에 flex를 걸고, 가로, 세로 위치를 중앙에 align-items: center;, justify-content: cen... HTML5CSS3CSS 설계 【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? 표제 밑줄을 2배색 index.html style.scss 제목 밑줄을 중앙에서 2배색 index.html style.scss 참고원:... HTML5CSS3CSS 설계 CSS 출력 초학자가 CSS를 배우는 데 있어서, 처음으로 사용법을 고민할 것에 대해 정리해 본다 :link : visited :hover :active : focus :link-:visited-:hover-:active-:focus :link 정상 상태에서의 표현 : visited 이미 클릭한 (방문된) 링크 상태 :hover 커서를 링크 위에 놓았을 때의 상태 :active 버튼을 누른 상태에서만 상... CSSCSS3CSS 설계우이 【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? -배경 점, 버튼 테두리 그라데이션 편- 일부 사용하는 장면이 있을지도 모르기 때문에 css에서 배경에 도트를 배치하는 방법입니다. index.html dot.scss css는 뭐든지 할 수 있다고 생각했습니다. 위 캡처 버튼입니다. html은 변하지 않으므로 CSS만 설명합니다. btn.scss 참고원:... HTML5CSS 설계 Form 요소를 css3로 디자인 Form 요소를 css3로 디자인하면, 입력이나 선택의 조작성・선택의 가독성이 훨씬 높아집니다. 요전날 Form의 코딩을 했으므로, 몇번이나 몇번이나 조사해 써 온 코드를 정리해 보았습니다. 라디오 버튼과 체크 박스는 원, 사각형 및 모든 체크를 before/after 요소로 만듭니다. contact.html style.css contact.html style.css... 양식CSS 설계양식CSS3HTML5 Sass(scss) 도입~ 푸핏 ), 자동화도 진행 꽤 효율적으로 작업을 할 수 있게 되었습니다. sass-lint 설정 Gulp의 설치 시스템은, 잘 하는 분에게 해 주셔서 나는 가이드라인이나 css방향의 설정을 담당했습니다 . 신규 참가자용으로 코딩의 가이드라인을 web화하고 있었으므로, 그쪽에 Sass, Gulp의 도입 매뉴얼이나 가이드라인을 추가. scss 부하에 대하여 sass-lint 소개 Sass 코딩의 ... SassscssCSS 설계 Re: 0부터 시작하는 CSS 설계 어제는 선생의'디자인 사고를 낡은 조직에 침투시키는 절차'였다. 본사가 운영하는 웹 서비스의 대형 개조 사건과 함께 저는 CSS의 관리와 디자인을 다시 배웠기 때문에 이 일을 쓸 것입니다. 구글 엔지니어 필립 월튼 은 좋은 CSS 디자인은 다음과 같다고 말했다. → 제작자가 생각하는 그런 인상인가(표시) → 의도하지 않은 동작이 있는지(영향) 간편한 재활용 → 공통 모듈 및 구성 요소 → 각... CSS 설계flocssCSS JSCSS의 제안 JSCSS(JavaScript CSS)는 FLOCSS와 SMACSS 개념 을 채택한 CSS 구성 방안이다. JSCSS에서 JavaScript의 변수 이름 또는 함수 이름으로 사용되는 CSS의 이름(ID 변수만)js_*을 사용합니다. 이외에도 CSS 사용l-*을 사용하여 JavaScript의 변수 이름과 함수 이름을 CSS 이름으로 사용하지 않습니다. 자바스크립트 프로그램은 l-* 접두사-를 ... CSS 설계flocssJavaScriptSMACSSCSS